<template>
	<view class="security-layout">
		<view class="list">
			<view class="item">
				<view class="left">
					<view class="item-title">
						{{$t('security.account')}}
					</view>
				</view>
				<view class="right">
					{{user.userAcc}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					<view class="item-title">
						{{$t('security.userCode')}}
					</view>
				</view>
				<view class="right">
					{{user.shortId}}
				</view>
			</view>


			<view class="item">
				<view class="left">
					<view class="item-title">
						{{$t('security.gesturePwd')}}
					</view>
				</view>
				<view class="swich" v-if="gesturePwd">
					<switch ref="switch" :checked='close' color="#53786C" style="transform:scale(0.7)"
						@change="switchChange" />
				</view>
				<navigator v-else hover-class="none" url='/pages/login/setGesturePassWrod?data=2'>
					<view class="right gesture">
						{{$t('security.set')}}
						<uni-icons type="right"></uni-icons>
					</view>
				</navigator>

			</view>

			<navigator hover-class="none" url="/pages/login/setGesturePassWrod?data=3" v-if="gesturePwd">
				<view class="item">
					<view class="left">
						<view class="item-title">
							{{$t('security.modifyGesturePwd')}}
						</view>
					</view>
					<view class="right">
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
			</navigator>

			<view class="item" v-if="supportSoterAuthenticationArray.includes('fingerPrint')">
				<view class="left">
					<view class="item-title">
						{{$t('security.fingerprint')}}
					</view>
				</view>
				<view class="right fingerprint" @click="openFignerPrint">
					<view class="synchronized">
						{{fignerprint?$t('security.synchronized'):$t('security.notSynchronized')}}
					</view>
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
			<view class="item" v-if="supportSoterAuthenticationArray.includes('facial')">
				<view class="left">
					<view class="item-title">
						{{$t('security.facial')}}
					</view>
				</view>
				<view class="right fingerprint" @click="openFignerPrint">
					<view class="synchronized">
						{{fignerprint?$t('security.synchronized'):$t('security.notSynchronized')}}
					</view>
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
			

			<navigator hover-class="none" url="/pages/login/modifyLoginPwd">
				<view class="item">
					<view class="left">
						<view class="item-title">
							{{$t('security.modifyPwd')}}
						</view>
					</view>
					<view class="right">
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
			</navigator>



			<view class="item" @click="logoffAccount">
				<view class="left">
					<view class="item-title">
						{{$t('security.logoff')}}
					</view>
				</view>
				<view class="right">
					<uni-icons type="right"></uni-icons>
				</view>
			</view>


		</view>
		<view class="logout" @click="logout">
			{{$t('security.logout')}}
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		apiUserLogoffAccount,
		apiUserLogoutAccount
	} from '../../api/user_api';
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		i18nTool
	} from '../../utils/i18en';
	import {
		gesturePwdState,
		getFingerPrintState,
		getGesturePwd,
		logoutClearStorage,
		openGesturePwd,
		setFingerprintState
	} from '../../utils/user_tools';
	import {
		platForm
	} from '../../utils/system';
	var user = ref(null);
	var gesturePwd = ref(null)
	var close = ref(null);
	const supportSoterAuthenticationArray = ref([])
	const fignerprint = ref(null);
	const popup = ref(null);
	var type;
	var showModalTitle;
	var showModalContent;
	var showConfirmTitle;
	var showConfirmContent;
	var notEnrolled ;
	var authContent;
	var authSuccess;
	var authFail;
	onLoad(() => {
		uni.setNavigationBarTitle({
			title: i18nTool('security.navTitle')
		})
	})
	
	onShow(() => {
		gesturePwd.value = getGesturePwd();
		close.value = gesturePwdState();
		fignerprint.value = getFingerPrintState();
		checkIsSupportSoterAuthentication();
	})
	
	//检查是否支持指纹
	const checkIsSupportSoterAuthentication = () => {
		uni.checkIsSupportSoterAuthentication({
			success(res) {
				supportSoterAuthenticationArray.value = res.supportMode;
				if(supportSoterAuthenticationArray.value.includes('fingerPrint')){
					type = i18nTool('security.fingerprint')
					showModalTitle =  i18nTool('security.cancelfingerprintTitle')
					showModalContent =  i18nTool('security.cancelfingerprintContent')
					showConfirmTitle =  i18nTool('security.showFingerConfirmTitle')
					showConfirmContent =  i18nTool('security.showFingerConfirmContent')
					notEnrolled =  i18nTool('security.notEnrolledFingerID') 
					authContent =  i18nTool('security.authFingerContent')
					authSuccess =  i18nTool('security.authFingerSuccess')
				}else if(supportSoterAuthenticationArray.value.includes('facial')){
					type = i18nTool('security.facial')
					showModalTitle =  i18nTool('security.cancelFaceIdTitle')
					showModalContent = i18nTool('security.cancelFaceIdContent')
					showConfirmTitle =  i18nTool('security.showFaceConfirmTitle')
					showConfirmContent =  i18nTool('security.showFaceConfirmContent')
					notEnrolled =  i18nTool('security.notEnrolledFaceID')
					authContent =  i18nTool('security.authFaceContent')
					authSuccess =  i18nTool('security.authFaceSuccess')
					
				}
			}
		})
	}
	
	
	const openFignerPrint=()=>{
		if(getFingerPrintState()){
			
			uni.showModal({
				title:showModalTitle,
				content:showModalContent,
				cancelText: i18nTool('security.cancel'),
				confirmText:i18nTool('security.confirm'),
				success(res) {
					if (res.confirm) {
						setFingerprintState(false);
						fignerprint.value = getFingerPrintState();
					} else {}
				}
			})
		}else{
			uni.showModal({
				title:showConfirmTitle,
				content:showConfirmContent,
				cancelText: i18nTool('security.cancel'),
				confirmText: i18nTool('security.open'),
				success(res) {
					if (res.confirm) {
						soterAuthenticationFunction(supportSoterAuthenticationArray.value[0]);
					} else {}
				}
			})
		}
		
		
	}


	const soterAuthenticationFunction = (dtype) => {
			uni.checkIsSoterEnrolledInDevice({
				checkAuthMode: dtype,
				success(res) {
					if (res.isEnrolled) {
						showBottomPop();
					} else {
						uni.showModal({
							content: notEnrolled,
							showCancel: false
						});
					}
					console.log(res);
				},
				fail(err) {
					uni.showModal({
						content: notEnrolled,
						showCancel: false
					});
					console.log(err);
				}
			});
		

	}
	
	function showBottomPop(){
		startFingerPrintAuthentication();
	}
	
	
	const startFingerPrintAuthentication = ()=>{
			uni.startSoterAuthentication({
				requestAuthModes:supportSoterAuthenticationArray.value,
				challenge: '01234567890', 
				authContent: authContent,
				success(res) {
					uni.showToast({
						icon: 'none',
						title: authSuccess
					});
					setFingerprintState(true);
					fignerprint.value = getFingerPrintState();
				},
				fail(err) {
					uni.showModal({
						content:  i18nTool('security.authFail') + err.errCode,
						showCancel: false
					});
					console.log(err);
				},
				checkAuthenticate:true
			});
			

	}

	function logoffAccount() {
		uni.showModal({
			cancelColor: "#606060",
			cancelText: i18nTool('security.cancel'),
			confirmText: i18nTool('security.sure'),
			confirmColor: "#18bc37",
			title: i18nTool('security.hint'),
			content: i18nTool('security.logoffmsg'),
			success(res) {
				if (res.confirm) {
					logoffAccountRequest();
				} else {}
			}
		})
	}

	function switchChange(e) {
		close.value = e.detail.value;
		if (e.detail.value) {
			openGesturePwd(true);
		} else {
			uni.navigateTo({
				url: "/pages/login/setGesturePassWrod?data=1"
			})
		}
	}

	function logout() {
		uni.showModal({
			cancelColor: "#606060",
			cancelText: i18nTool('security.cancel'),
			confirmText: i18nTool('security.sure'),
			confirmColor: "#18bc37",
			title: i18nTool('security.hint'),
			content: i18nTool('security.logoutmsg'),
			success(res) {
				if (res.confirm) {
					logoutRequest();
				} else {

				}
			}
		})
	}
	async function logoffAccountRequest() {
		uni.showLoading({
			title: 'Loading...'
		})
		let res = await apiUserLogoffAccount();
		uni.clearStorage();
		uni.reLaunch({
			url: "/pages/login/login"
		})
	}

	async function logoutRequest() {
		uni.showLoading({
			title: 'Loading...'
		})
		let res = await apiUserLogoutAccount();
		logoutClearStorage();
		uni.reLaunch({
			url: "/pages/login/login"
		})

	}
	onLoad(() => {
		user.value = uni.getStorageSync('user');
	})
</script>

<style lang="scss" scoped>
	.security-layout {
		.list {
			padding: 20rpx 40rpx;

			.item {
				height: 120rpx;
				border-bottom: 2rpx solid #f1f1f1;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item-icon {
						width: 46rpx;
						height: 46rpx;

						.icon-img {
							width: 100%;
							height: 100%;
						}
					}

					.item-title {
						font-size: 30rpx;
						padding-left: 20rpx;
					}
				}

				.gesture {
					font-size: 28rpx;
					padding-left: 20rpx;
					color: #666;
				}

				.fingerprint {
					font-size: 28rpx;
					padding-left: 20rpx;
					color: #666;
					display: flex;
					align-items: center;
					justify-content: start;
				}

			}
		}

		.logout {
			margin: 80rpx;
			background-color: $uni-color-theme;
			border-radius: 40rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 28rpx;
		}
		.bottomFignerprint{
			height: 500rpx;
			background-color: #fff;
			padding: 40rpx 40rpx;
			.title{
				color: #333;
				font-size: 36rpx;
			}
			.touchFingerPrint{
				color: #666;
				font-size: 28rpx;
				text-align: center;
			}
			.subtouchFinger{
				color: #999;
				font-size: 26rpx;
				text-align: center;
				margin-top: 40rpx;
			}
			.fignerPrigntImg{
				width: 128rpx;
				height: 128rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 60rpx auto;
				.img{
					width: 100%;
					height: 100%;
				}
			}
			.cancel{
				margin-top: 60rpx;
				color: #1296db;
				font-size: 26rpx;
			}
		}
	}
</style>